<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>


 
 
 <script type="text/javascript">
$(document).ready(function(){
	
	reloadPaginator(<s:property value="tiendaId"/>,0,0);
	
});

function previous(){
	
	new_page= $('#current_page').val()-1;
	//if there is an item before the current active link run the function
	
	if($('.active_page').prev('.page_link').length==true){
		go_to_page(new_page);
	}
	
}

function next(){
	new_page = parseInt($('#current_page').val()) + 1;
	//if there is an item after the current active link run the function
	if($('.active_page').next('.page_link').length==true){
		go_to_page(new_page);
	}
	
}
function go_to_page(page_num){
	
	var tiendaId =document.busquedaCategorias.tiendaId.value;
	var categoriaid=document.busquedaCategorias.categoriaid.value;
	var subcategoriaid =document.busquedaCategorias.subcategoriaid.value;

	//alert("categoriaid="+categoriaid+"&tiendaId="+tiendaId+"&subcategoriaid="+subcategoriaid+"&pagina="+(page_num +1));
	$.post( "${pageContext.servletContext.contextPath}/liwalo/ResultadoBusquedaCategoriaAjax?categoriaid="+categoriaid+"&tiendaId="+tiendaId+"&subcategoriaid="+subcategoriaid+"&pagina="+(page_num +1), function( data ) {
	  $( "#resultado_articulos" ).html( data );
	});
	
// 	//get the element number where to start the slice from
// 	start_from = page_num * show_per_page;
	
// 	//get the element number where to end the slice
// 	end_on = start_from + show_per_page;
	
// 	//hide all children elements of content div, get specific items and show them
// 	$('#tienda_articulos').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');
	
// 	/*get the page link that has longdesc attribute of the current page and add active_page class to it
// 	and remove that class from previously active page link*/
	$('.page_link[longdesc=' + page_num +']').addClass('active_page').siblings('.active_page').removeClass('active_page');
	
// 	//update the current page input field
	$('#current_page').val(page_num);
	
}


  
</script>

<style>
#page_navigation a{
	padding:3px;
	border:1.5px solid gray;
	margin:2px;
	color:black;
	text-decoration:none
}
.active_page{
	background:#58D3F7;
	color:black !important;
}



</style>
 
 
    <!-- CONTENIDO START -->
  
  
  
  <s:form id="busquedaCategorias">
   <div id="contenido">
    
   
     <s:hidden name="tiendaId" id="tiendaId" > </s:hidden> 
	 <s:hidden name="categoriaid" id="categoriaid" /> 
 	 <s:hidden name="subcategoriaid" id="subcategoriaid" /> 
	 <s:hidden name="producto_Id" id="producto_Id" > </s:hidden> 
    

        <div class="fila">
          <div class="contenido_borde_izq">
          <div class="contenido_borde_der">
            <div class="columna_derecha">
	
              <h2><s:property value="tiendavo.nombre"/> </h2>
              <!--tienda-->
            <div class="tienda">

               <div class="imagen_cabecera">
                <img src="../<s:property value="tiendavo.imgPrincipal"/>" alt="imagen cabecera" />
               </div>

               <div class="tienda_datos"><s:property value="tiendavo.tipoViaId.nombre"/> <s:property value="tiendavo.direcccion"/> .CP <s:property value="tiendavo.cp"/> . <s:property value="tiendavo.ciudadId.nombre"/>. <s:property value="tiendavo.web"/> tlf: <s:property value="tiendavo.telefono"/> </div>

                <div class="tienda_desc"><s:property value="tiendavo.descripcion"/> </div>

               <div class="tienda_filtros">

                 <ul id="pestanias" class="nav nav-tabs">
<!--                   <li class="active"><a href="#listadoCategorias" data-toggle="tab" id="categoriaTab">CATEGORÍA</a></li> -->
<!--                    <li class="active"><a href="" data-toggle="tab" id="categoriaTab" onclick="javascript:listadosCategorias();">CATEGORÍA</a></li> -->
                    <li class="active reloadCategory"><a href="#listado_Categorias" data-toggle="tab" id="categoriaTab" >CATEGORÍA</a></li>
                   
                   <li ><a href="#articulo" data-toggle="tab" id="articuloTab" >ARTÍCULO</a> </li>
                 </ul>

                  <div id="pestaniasContenido" class="tab-content">
                   <div class="tab-pane fade in active " id="listado_Categorias">
            		 
                      <ul class="checkbox_list">
                      
                      	<li>
                          <div class="radioButton">
                            <input type="radio" id="categoria_0" name="radio" rel="categoria_0" value="allCat" checked onclick="javascript:listadosCategorias();"/>
                            <label for="categoria_0"><span></span>Todas</label>
                          </div>
                        </li>
                         
	                     <s:iterator value="listadoCategorias" var="listacategoria">
		                        
		                         <li>
			                          <div class="radioButton">
			                               <input type="radio" id="categoria_<s:property value="id"/>" name="radio" rel="categoria_<s:property value="id"/>" value="categoria_<s:property value="id" />"   onclick="javascript:cargarCategoria(<s:property value="id" />)" />
			                            <label for="categoria_<s:property value="id"/>"><span></span><s:property value="nombre"/></label>
			                          </div>
		                        </li>
	                     
	                     </s:iterator>
            		 
                      </ul>

                   </div>
                   <div class="tab-pane fade" id="articulo">
<!--                     RADIOBUTTONS DE SUBCATEGORIAS PARA CATEGORIA 1 -->

					
					 
					  <s:iterator value="listadoCategorias" var="listadoCategorias">
					   <ul class="checkbox_list" id="categoria_<s:property value="id"/>">
						  	<li>
		                        <div class="radioButton">
		                         
		                          <input type="radio" id="allCat<s:property value="id"/>" name="radio" rel="categoria_<s:property value="id"/>" value="allCat<s:property value="id"/>" onclick="javascript:todasCategorias(<s:property value="id"/>) " />
		                          <label for="allCat<s:property value="id"/>"><span></span>Todas</label>
		                        </div>
	                        </li>
	                        
	                        
	                   <s:iterator value="subcategoriaList" var="subcategorialist">
 
						  		<li>
			                         <div class="radioButton">
			                           <input type="radio" id="subcategoria_<s:property value="id"/>" name="radio" rel="subcategoria_<s:property value="id"/>" onclick="javascript:cargarSubCategoria(<s:property value="id" />)" />
			                           <label for="subcategoria_<s:property value="id"/>"><span></span><s:property value="nombre"/></label>
			                         </div>
			                    </li>
						  		
						  	</s:iterator>
					  </ul>
					  </s:iterator>	
					  	
					
					  
					  </div>
                 </div>
		
		 <div class="tienda_articulos" id="listadoArticulos">
		  
           <s:include value="/liwalo/listadoArticulos.jsp"/>
         </div>  
           
			
                	<div id='page_navigation'class="centrado" >
				</div>
                
               

               </div>
            </div>
            <!--tienda-->


            </div>
          </div>
          </div>
            <div class="contenido_borde_abajo">
              <div class="esquina_izq"></div>
              <div class="esquina_der"></div>
            </div>
        </div>

        <div class="columna_izquierda">
		  <div class="pestania">
		    <div class="pestania_top"></div>
		    <s:a action="Inicio" title="Volver a la Home"><span class="bigger" >VOLVER</span> A LA HOME</s:a>
		
		
		    <div class="pestania_bottom"></div>
		  </div>
		</div>
    </div>
    <!-- CONTENIDO END -->
  </s:form>

   
  <script src="../js/jquery.js"></script>
  <script src="../js/bootstrap.min.js"></script>
  <script src="../js/liwalo.js"></script>
  <script type="text/javascript">
  $('#articuloTab').hide();
  
  listadosSubcatecorias();
  
  $('.reloadSubCategory').click(function () {
	  listadosSubcatecorias();
	  });

  
  $('.reloadCategory').click(function () {
	 listadosCategorias();
  });

  $('ul.checkbox_list').delegate('input[type=radio]', 'change', function () {
    var $lis = $('.listado_articulos > li > div'),
    $checked = $('input:checked');

    if ($(this).parent('div#listado_Categorias > ul > li > div').length) {
      if($(this).attr('value')=='allCat'){
        $('.listado_articulos > li > div').show('slow');
        $('#articuloTab').hide();
        

      }else{
        $('#pestanias a[href="#articulo"]').tab('show');
        $('#articuloTab').show();
        $('#articulo ul').hide();
        $lis.hide('slow').filter(function () {
            return $(this).is($checked.map(function () {
            return '.' + $(this).attr('rel');
        }).get().join(', '));
        }).show('slow');

        $('ul#'+$( "input:checked" ).val()).show();
        $('ul#'+$( "input:checked" ).val()+' li div input').first().prop('checked', true);
      }
    }else{
        if ($checked.length) {
          $lis.hide('slow').filter(function () {
              return $(this).is($checked.map(function () {
              return '.' + $(this).attr('rel');
          }).get().join(', '));
          }).show('slow');
        } else {
          $lis.show('slow');
        }
    }

  });
  
  function cargarCategoria(categoriaid){
	  
	  document.busquedaCategorias.categoriaid.value=categoriaid;
	  var tiendaId= document.busquedaCategorias.tiendaId.value;	 
	  var subcategoriaid=document.busquedaCategorias.subcategoriaid.value;
	  

	  
		$( "#listadoArticulos" ).load( "${pageContext.servletContext.contextPath}/liwalo/ResultadoBusquedaCategoriaAjax.action?categoriaid="+categoriaid+"&tiendaId="+tiendaId+"&subcategoriaid="+subcategoriaid+"&pagina="+1, function() {
			reloadPaginator(tiendaId,categoriaid,subcategoriaid);
		});

	}
  
  function cargarSubCategoria(subcategoriaid){

	  		document.busquedaCategorias.subcategoriaid.value=subcategoriaid;
	  		var tiendaId= document.busquedaCategorias.tiendaId.value;
			var categoriaid=document.busquedaCategorias.categoriaid.value;
			
		 $( "#listadoArticulos" ).load( "${pageContext.servletContext.contextPath}/liwalo/ResultadoBusquedaCategoriaAjax.action?categoriaid="+categoriaid+"&tiendaId="+tiendaId+"&subcategoriaid="+subcategoriaid+"&pagina="+1, function() {	  
			
			  reloadPaginator(tiendaId,categoriaid,subcategoriaid);
			  
			  
		});
		
	}
	
  $(document).ready(function(){
		$('.radiocategoria').click(function(event){
			cargarCategoria($('#'+event.target.id).val());
		});	
  });
  
  $(document).ready(function(){
		$('.radiosubcategoria').click(function(event){
			cargarSubCategoria($('#'+event.target.id).val());
		});	
});
   
  
  function verArticulo(producto_Id){
	 
	  document.busquedaCategorias.producto_Id.value=producto_Id;
	  document.busquedaCategorias.action="VerArticulo";
      document.busquedaCategorias.submit();
  }
  
  function listadosCategorias(){
	  

		
	  var tiendaId =document.busquedaCategorias.tiendaId.value;
	  $( "#listadoArticulos" ).load( "${pageContext.servletContext.contextPath}/liwalo/ResultadoBusquedaCategoriaAjax.action?categoriaid="+0+"&tiendaId="+tiendaId+"&subcategoriaid="+0+"&pagina="+1, function() {
		  reloadPaginator(tiendaId,0,0);
	
		});
	 
	}
  
  function listadosSubcatecorias(){

	  var tiendaId =document.busquedaCategorias.tiendaId.value;
	  var categoria =document.busquedaCategorias.categoriaid.value;
	  $( "#listadoArticulos" ).load( "${pageContext.servletContext.contextPath}/liwalo/ResultadoBusquedaCategoriaAjax.action?categoriaid="+categoria+"&tiendaId="+tiendaId+"&subcategoriaid="+0+"&pagina="+1, function() {
		  reloadPaginator(tiendaId, categoria,0);
		});
	  
	 
	}
  
  function todasCategorias (categoriaid){
	  var tiendaId= document.busquedaCategorias.tiendaId.value;
	  $( "#listadoArticulos" ).load( "${pageContext.servletContext.contextPath}/liwalo/ResultadoBusquedaCategoriaAjax.action?categoriaid="+categoriaid+"&tiendaId="+tiendaId+"&subcategoriaid="+0+"&pagina="+1, function() {
		  reloadPaginator(tiendaId,categoriaid,0);
		});
  }
  
  function reloadPaginator(tiendaid, categoriaid,subcategoriaid){
	  	
	  
	  	  document.busquedaCategorias.tiendaId.value=tiendaid;
		  document.busquedaCategorias.categoriaid.value=categoriaid;
		  document.busquedaCategorias.subcategoriaid.value=subcategoriaid;
	  
	    //how much items per page to show
		var show_per_page = 10; 
		//getting the amount of elements inside content div
		
		var number_of_items = document.busquedaCategorias.sizeList.value;
		
		//calculate the number of pages we are going to have
		var number_of_pages = Math.ceil(number_of_items/show_per_page);
		
		//set the value of our hidden input fields
		$('#current_page').val(0);
		$('#show_per_page').val(show_per_page);
		
		//now when we got all we need for the navigation let's make it '
		
		/* 
		what are we going to have in the navigation?
			- link to previous page
			- links to specific pages
			- link to next page
		*/
		var navigation_html = ' <ul class="pagination"> <a class="previous_link" href="javascript:previous();"><<</a>';
		var current_link = 0;
		while(number_of_pages > current_link){
			navigation_html += '<a class="page_link" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>';
			current_link++;
		}
		navigation_html += '<a class="next_link" href="javascript:next();">>></a> </ul>';
		if(number_of_items<=10){
			navigation_html="";
		}
		$('#page_navigation').html(navigation_html);
		
		//add active_page class to the first page link
		$('#page_navigation .page_link:first').addClass('active_page');
		
		//hide all the elements inside content div
		$('#tienda_articulos').children().css('display', 'none');
		
		//and show the first n (show_per_page) elements
		$('#tienda_articulos').children().slice(0, show_per_page).css('display', 'block');
	  
  }
  
  
  </script>

<script type="text/javascript">if(!NREUMQ.f){NREUMQ.f=function(){NREUMQ.push(["load",new Date().getTime()]);var e=document.createElement("script");e.type="text/javascript";e.src=(("http:"===document.location.protocol)?"http:":"https:")+"//"+"js-agent.newrelic.com/nr-100.js";document.body.appendChild(e);if(NREUMQ.a)NREUMQ.a();};NREUMQ.a=window.onload;window.onload=NREUMQ.f;};NREUMQ.push(["nrfj","beacon-2.newrelic.com","a2cef8c3d3","1841284","Z11RZxdWW0cEVkYLDV4XdUYLVEFdClsdAAtEWkZQDlJBGgRFQhFMWFdARwBTG0IMUEURWENdQUUA",0,1498,new Date().getTime(),"","","","",""]);</script></body>
